﻿@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ButtonsModel
@{
    ViewData["Title"] = "Buttons";
}

@section styles {
    <abp-style-bundle>
        <abp-style src="/css/demo.css" />
        <abp-style src="/libs/highlight.js/styles/default.css" />
    </abp-style-bundle>
}

@section scripts {
    <abp-script-bundle>
        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
            <abp-script src="/Pages/Components/highlightCode.js" />*@
    </abp-script-bundle>
}

<link rel="stylesheet"
      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<h2>Buttons</h2>

<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/buttons/" target="_blank"> Bootstrap button</a>.</p>

<h4>Examples</h4>

<div class="demo-with-code">
    <div class="demo-area">
<abp-button text="Default" />
<abp-button button-type="Primary" text="Primary" />
<abp-button button-type="Secondary">Secondary</abp-button>
<abp-button button-type="Success">Success</abp-button>
<abp-button button-type="Danger">Danger</abp-button>
<abp-button button-type="Warning">Warning</abp-button>
<abp-button button-type="Info">Info</abp-button>
<abp-button button-type="Light">Light</abp-button>
<abp-button button-type="Dark">Dark</abp-button>
<abp-button button-type="Link">Link</abp-button>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button&gt; Default &lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Primary&quot;&gt;Primary&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;Secondary&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Success&quot;&gt;Success&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Danger&quot;&gt;Danger&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Warning&quot;&gt;Warning&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Info&quot;&gt;Info&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Light&quot;&gt;Light&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Dark&quot;&gt;Dark&lt;/abp-button&gt;

&lt;abp-button button-type=&quot;Link&quot;&gt;Link&lt;/abp-button&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
<pre><code>
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Default&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Secondary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;&gt;Light&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot;&gt;Dark&lt;/button&gt;

&lt;button type=&quot;button&quot; class=&quot;btn btn-link&quot;&gt;Link&lt;/button&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Button tags</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <a abp-button="Primary" href="#">Link</a>
        <abp-button button-type="Primary" type="submit" text="Button" />
        <input abp-button="Primary" value="Input" />
        <input abp-button="Primary" type="submit" value="Submit" />
        <input abp-button="Primary" type="reset" value="Reset" />
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
<pre><code>
&lt;a abp-button="Primary" href="#"&gt;Link&lt;/a&gt;
&lt;abp-button button-type=&quot;Primary&quot; type=&quot;submit&quot; text=&quot;Button&quot;/&gt;
&lt;input abp-button="Primary" value="Input" /&gt;
&lt;input abp-button="Primary" type="submit" value="Submit" /&gt;
&lt;input abp-button="Primary" type="reset" value="Reset" /&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Link&lt;/a&gt;
&lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Button&lt;/button&gt;
&lt;input class=&quot;btn btn-primary&quot; type=&quot;button&quot; value=&quot;Input&quot;&gt;
&lt;input class=&quot;btn btn-primary&quot; type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
&lt;input class=&quot;btn btn-primary&quot; type=&quot;reset&quot; value=&quot;Reset&quot;&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Outline buttons</h4>

<div class="demo-with-code">
    <div class="demo-area">
<abp-button button-type="Outline_Primary">Primary</abp-button>
<abp-button button-type="Outline_Secondary">Secondary</abp-button>
<abp-button button-type="Outline_Success">Success</abp-button>
<abp-button button-type="Outline_Danger">Danger</abp-button>
<abp-button button-type="Outline_Warning">Warning</abp-button>
<abp-button button-type="Outline_Info">Info</abp-button>
<abp-button button-type="Outline_Light">Light</abp-button>
<abp-button button-type="Outline_Dark">Dark</abp-button>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button button-type="Outline_Primary"&gt;Primary&lt;/abp-button&gt;
&lt;abp-button button-type="Outline_Secondary"&gt;Secondary&lt;/abp-button&gt;
&lt;abp-button button-type="Outline_Success"&gt;Success&lt;/abp-button&gt;
&lt;abp-button button-type="Outline_Danger"&gt;Danger&lt;/abp-button&gt;
&lt;abp-button button-type="Outline_Warning"&gt;Warning&lt;/abp-button&gt;
&lt;abp-button button-type="Outline_Info"&gt;Info&lt;/abp-button&gt;
&lt;abp-button button-type="Outline_Light"&gt;Light&lt;/abp-button&gt;
&lt;abp-button button-type="Outline_Dark"&gt;Dark&lt;/abp-button&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot;&gt;Primary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-secondary&quot;&gt;Secondary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-success&quot;&gt;Success&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-info&quot;&gt;Info&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Light&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-dark&quot;&gt;Dark&lt;/button&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Sizes</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-button size="Large" button-type="Primary" text="Large button" />
        <abp-button size="Large" button-type="Secondary" text="Large button" />
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button size=&quot;Large&quot; button-type=&quot;Primary&quot; text=&quot;Large button&quot; /&gt;
&lt;abp-button size=&quot;Large&quot; button-type=&quot;Secondary&quot; text=&quot;Large button&quot; /&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;Large button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary btn-lg&quot;&gt;Large button&lt;/button&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>


<div class="demo-with-code">
    <div class="demo-area">
        <abp-button size="Small" button-type="Primary" text="Small button" />
        <abp-button size="Small" button-type="Secondary" text="Small button" />
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button size=&quot;Small&quot; button-type=&quot;Primary&quot; text=&quot;Small button&quot; /&gt;
&lt;abp-button size=&quot;Small&quot; button-type=&quot;Secondary&quot; text=&quot;Small button&quot; /&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-sm&quot;&gt;Small button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary btn-sm&quot;&gt;Small button&lt;/button&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>


<div class="demo-with-code">
    <div class="demo-area">
        <abp-button size="Block" button-type="Primary" text="Block level button" />
        <abp-button size="Block" button-type="Secondary" text="Block level button" />
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button size=&quot;Block&quot; button-type=&quot;Primary&quot; text=&quot;Block level button&quot; /&gt;
&lt;abp-button size=&quot;Block&quot; button-type=&quot;Secondary&quot; text=&quot;Block level button&quot; /&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg btn-block&quot;&gt;Block level button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary btn-lg btn-block&quot;&gt;Block level button&lt;/button&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>


<h4> Icon</h4>

<div class="demo-with-code">

    <div class="demo-area">
        <abp-button icon="pencil" text="With Icon" />
        <abp-button icon-type="FontAwesome" icon="info" text="With Icon" />
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button icon=&quot;pencil&quot; text=&quot;With Icon&quot;/&gt;
&lt;abp-button icon-type=&quot;FontAwesome&quot; icon=&quot;info&quot; text=&quot;With Icon&quot;/&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;fa fa-pencil&quot;&gt;&lt;/i&gt; &lt;span&gt;With Icon&lt;/span&gt;&lt;/button&gt;
&lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;fa fa-info&quot;&gt;&lt;/i&gt; &lt;span&gt;With Icon&lt;/span&gt;&lt;/button&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>

    <div class="attribute-area">
        <ul>
            <li>
                <b>icon-type</b>: Formats the icon attribute. Default value is FontAwesome.
            </li>
            <li>
                <b>icon</b>: Sets icon to button.
            </li>
        </ul>
    </div>
</div>


<h4> Busy Text Example</h4>


<div class="demo-with-code">

    <div class="demo-area">
            <abp-button text="Busy" busy-text="Saving..."/>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button text=&quot;Busy&quot; busy-text=&quot;Saving...&quot;/&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Generated">
                <pre><code>
&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Saving...&quot;&gt;&lt;span&gt;Busy&lt;/span&gt;&lt;/button&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>

    <div class="attribute-area">
        <ul>
            <li>
                <b>busy-text</b>: Sets "data-busy-text" attribute. Default value is localization of "ProcessingWithThreeDot" string.
            </li>
            <li>
                <b>busy-text-is-html</b>: Sets "data-busy-is-html" attribute. Default value is "false".
            </li>
        </ul>
    </div>
</div>